<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>vue渲染函数</title>
</head>
<body>
    <h1>d</h1>
<div id="root1">
    <anchored-heading :level="1">Hello world!</anchored-heading>
</div>
    <!-- <blog-post>
        <template v-slot:header>
          <h1>About Me</h1>
        </template>
      
        <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
      
        <template v-slot:footer>
          <p>Copyright 2016 Evan You</p>
        </template>
      
        <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.

        <h>nii1</h>
      </blog-post> -->

    <script>
        console.log(new Vue);
        
//         Vue.component('anchored-heading', {
//   template: '#anchored-heading-template',
//   props: {
//     level: {
//       type: Number,
//       required: true
//     }
//   }
// })

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

new Vue({
    el:"#root1"
})

    </script>

<!-- <script type="text/x-template" id="anchored-heading-template">
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  </script> -->
</body>
</html>